<template>
  <div>
    <div class="list-head" v-if="addressListObj.data">
      {{ t("保存地址数", { num: addressListObj.data.length }) }}
    </div>
    <el-table
      :data="addressListObj.data"
      style="width: 100%"
      :key="tableKey"
      :header-row-style="{
        fonteight: '500',
        fontSize: '16px',
        color: '#222222',
        background: '#F1F1F1',
      }"
    >
      <el-table-column prop="name" :label="t('收货人')" :align="'center'">
      </el-table-column>
      <el-table-column :label="t('所在地区')" :align="'center'">
        <template slot-scope="scope">
          <p v-if="scope.row.province">
            {{ `${scope.row.province}${scope.row.city}${scope.row.district}` }}
          </p>
          <p v-if="!scope.row.province">{{ scope.row.country }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="address" :label="t('详细地址')" :align="'center'">
      </el-table-column>
      <el-table-column prop="mobile" :label="t('手机号')" :align="'center'">
      </el-table-column>
      <el-table-column :label="t('操作')" :align="'center'">
        <template slot-scope="scope">
          <el-button
            class="edit action-btn"
            size="mini"
            @click="handle(scope.$index, scope.row, 'edit')"
            >{{ t("修改") }}</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button
            class="dele action-btn"
            size="mini"
            @click="handle(scope.$index, scope.row, 'dele')"
            >{{ t("删除") }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="" :align="'center'">
        <template slot-scope="scope">
          <el-button
            class="btn-default"
            :default="scope.row.default == '1'"
            size="mini"
            @click="handle(scope.$index, scope.row, 'default')"
            >{{ t("默认地址") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="page"
      layout="prev, pager, next"
      :total="addressListObj.total"
      :current-page="addressListObj.current_page"
      :hide-on-single-page="true"
    ></el-pagination>
    <el-dialog
      :title="t('修改收货地址')"
      :visible.sync="edit_dialog.show"
      width="666px"
    >
      <addressEidt
        :adress="edit_dialog.item"
        @editAddress="handle(undefined, $event, 'edit')"
      ></addressEidt>
    </el-dialog>
  </div>
</template>

<script>
import addressEidt from "@/components/addressEidt.vue";
export default {
  components: {
    addressEidt,
  },
  props: {
    addressListObj: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      tableKey: 0,
      edit_dialog: { show: false },
    };
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     * @param {Object} opt 其他参数
     */
    t(v, opt) {
      if (opt) {
        return this.$t(`地址页.${v}`, opt);
      }
      return this.$t(`地址页.${v}`);
    },
    handle(idx, item, key) {
      if (key == "edit" && !this.edit_dialog.show) {
        this.edit_dialog = {
          item: item,
          show: true,
        };
      } else {
        this.$emit("click", { ...item, type: key });
        this.edit_dialog = {
          item: undefined,
          show: false,
        };
      }
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-table__cell {
  font-weight: 400;
  font-size: 16px;
  color: #222222;
}
::v-deep .el-divider {
  background-color: #000 !important;
}
::v-deep .el-dialog .el-form .el-input__inner {
  //   width: 450px;
  height: 50px;
  border: none !important;
  background: #f9f9f9;
  border-radius: 10px;
}
.list-head {
  background: #f9f9f9;
  padding-left: 30px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  height: 36px;
  line-height: 36px;
}

.action-btn {
  border: none;
  padding: 0;
  font-size: 16px;
}

.edit {
  color: #ff5757;
  font-size: 16px;
}

.dele {
  color: #222;
  font-size: 16px;
}

.btn-default {
  font-size: 16px;
  line-height: 40px;
  border-radius: 10px;
  padding: 0px 18px;
  border: none;
  background: #fff;
  color: #222;
}

.btn-default[default] {
  background: #ff5757;
  color: #fff;
}

.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
